<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单注册页面</title>
    <link rel="stylesheet" href="./注册.css">
    <style>
        span{
            color: red;
            display: none;
           
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>注册页面</h2>
            <div class="input-box">
                <label>用户名</label>
                <input type="text" placeholder="至少2个中文汉字或4个字符">
                <span>请输入昵称</span>
            </div>
           
            <div class="input-box">
                <label>密码</label>
                <input type="password" placeholder="请输入六位数字母大小写">
                <span>请输入正确的格式</span>
            </div>
         
            
            <div class="input-box">
                <label>邮箱</label>
                <input type="password"placeholder="请输入正确的邮箱号">
                <span>请输入正确的邮箱</span>
            </div>
            <div class="btn-box">
                <!-- <a href="javascript:void(0)">忘记密码?</a> -->
                <div>
                    <!-- <button>登录</button> -->
                    <button class="but">注册</button>
                    <br><span class="sp"></span>
                </div>
            </div>
            <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="./注册.js"></script>
    <script>
    </script>
    <script>
        //用户名
        // var inp = document.querySelectorAll('.input-box input')[0]
        // inp.addEventListener('blur', () => {
        //     if (!/^[\u4e00-\u9fa5]{4,10}$/.test(inp.value)) {
        //         document.querySelectorAll('span')[0].style.display= 'block'
        //     }else{
        //         document.querySelectorAll('span')[0].style.display= 'none'
        //         localStorage.setItem('昵称',inp.value)

        //     }
        // })
        // // 账号
        // var inp1 = document.querySelectorAll('.input-box input')[1]
        // inp1.addEventListener('blur', () => {
        //     if (inp1.value == '') {
        //         document.querySelectorAll('span')[1].style.display= 'block'
        //     }else{
        //         document.querySelectorAll('span')[1].style.display= 'none'
        //         localStorage.setItem('账号',inp1.value)
        //     }
        // })
        // // 密码
        // var inp2 = document.querySelectorAll('.input-box input')[2]
        // var mi = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,10}$/
        // inp2.addEventListener('blur', () => {
        //     if (!mi.test(event.target.value)) {
        //         document.querySelectorAll('span')[2].style.display= 'block'
        //     } else {
        //           document.querySelectorAll('span')[2].style.display= 'none'
        //           localStorage.setItem('密码',inp2.value)
        //     }
        // })
        // //确认密码
        // var inp3 = document.querySelectorAll('.input-box input')[3]
        // inp3.addEventListener('blur', () => {
        //     if (inp2.value != inp3.value) {
        //         document.querySelectorAll('span')[3].style.display= 'block'
        //     }else{
        //         document.querySelectorAll('span')[3].style.display= 'none'
        //     }
        // })
        // //手机号
        // var inp4 = document.querySelectorAll('.input-box input')[4]
        // var sho = /^1\d{10}$/
        // inp4.addEventListener('blur', () => {
        //     if (!sho.test(event.target.value)) {
        //        document.querySelectorAll('span')[4].style.display= 'block'
        //     }else{
        //         document.querySelectorAll('span')[4].style.display= 'none'
        //     }
        // })
        // // 邮箱
        // var inp5 = document.querySelectorAll('.input-box input')[5]
        // var you = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
        // inp5.addEventListener('blur', () => {
        //     if (!you.test(event.target.value)) {
        //         document.querySelectorAll('span')[5].style.display= 'block'
        //     }else{
        //         document.querySelectorAll('span')[5].style.display= 'none'
            
        //     }
        // })
        // //注册
        // document.querySelector('.but').addEventListener('click',()=>{
        //     if (!/^[\u4e00-\u9fa5]{4,10}$/.test(inp.value)) {
        //         alert('用户名格式有误');
        //     } else if (inp1.value == '') {
        //         alert('账号格式有误');
        //     } else if (!mi.test(inp2.value)) {
        //         alert('密码有误');
        //     } else if (inp2.value != inp3.value) {
        //         alert('确认密码不一致');
        //     } else if (!/^[0-9]{11}$/.test(inp4.value)) {
        //         alert('手机号格式有误');
        //         // /^[0-9A-Za-z_]+@+[0-9A-Za-z_]+[.com]$/
        //     } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inp5.value)) {
        //         alert('邮箱格式有误');
        //     } else {
        //         location.assign('./登录.html')
        //     }
        // })
    </script>
</body>

</html>
